<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8"/>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <title>What'on</title>
    <link type="text/css" href="${rc.getContextPath()}/front/css/all.css" rel="stylesheet" />
    <link type="text/css" href="${rc.getContextPath()}/front/css/miaov_style.css" rel="stylesheet" />
    <script type="text/javascript" src="${rc.getContextPath()}/front/js/jquery.js"></script>
    <style>
/*广播广告*/

#slide { position: relative; margin: 15px auto; width: 980px; height: 396px; overflow: hidden; }
#slide .slide-lists { width: 734px; }
#slide .list { float: left; display: none; width: 734px; height: 396px; }
#slide .small-pics { width: 227px; }
#slide .smallpic { float: left; position: relative; margin-bottom: 16px; width: 100%; }
#slide .small-pics .mask { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 122px; background: #000; opacity: 0.5; filter: alpha(opacity=50); }
#slide .small-pics .cur .mask { display: none; }
#slide .slide-btns { position: absolute; left: 12px; bottom: 22px; }
#slide .slidebtn { float: left; background: #bebdbd; width: 18px; height: 18px; border-radius: 8px; margin-right: 10px; cursor: pointer; }
#slide .slide-btns .cur { background: #ed1f24; }
#slide .contents { position: absolute; bottom: 0; left: 0px; background: black; font-size: 14px; line-height: 50px; text-align: left; padding-left: 20px; overflow: hidden; z-index: 200; opacity: 0.5; filter: alpha(opacity=50); }
#slide .content { float: left; display: none; width: 714px; height: 50px; }
#slide .content a { color: #fff; }
/*左边活动*/
.active { width: 637px; }
.active .title { width: 637px; height: 58px; line-height: 58px; }
.active .title span { font-size: 26px; margin-left: 20px; margin-right: 0px; }
.active .title em { float: left; font-size: 13px; margin-left: 20px; }
.dropdownArea { position: relative; top: 19px; height: 22px; line-height: 22px; width: 144px; }
.dropdownArea input { width: 132px; height: 20px; line-height: 22px; position: absolute; border: 1px solid #e0e0e0; padding: 0 0px 0 10px; font: 12px; }
.dropdownArea .dropdownIco { margin: 0px; position: absolute; background: url(${rc.getContextPath()}/front/images/ico_dropdown.gif) no-repeat 0 0; width: 18px; height: 18px; right: 2px; top: 2px; }
.activelist { width: 637px; height: 492px;  }
.activelist ul li { width: 619px; height: 136px; background: #f7f9f9; text-align: left; margin-left: 9px; margin-top: 9px; }
.activelist ul li .imgli { width: 169px; height: 135px; }
.activelist ul li .spanli { width: 420px; height: 135px; }
.activelist ul li span.title1 a {   margin-top: 9px; color: #de3339; font-size: 13px; }
.activelist ul li span {margin-top: 12px; line-height: 19px;margin-left: 23px; display: block; }
.activelist ul li .like { width: 413px; height: 31px; border-top: 1px solid #c8cbcd; margin-left: 23px; color: #b7b9bb; line-height: 25px; text-align: right; }
/*右边日历*/
.calendardiv { width: 307px; }
.calendar { width: 307px; height: 189px; margin-top: 15px; }
.card { width: 307px; height: 172px; margin-top: 8px; }
.comments { margin-top: 8px; padding: 15px; height: 130px; background: #f7f9f9; }
.comments .commenttitle { font-size: 18px; float: left; }
.comments .content { float: left; margin-top: 12px; }
.comments .content .contentr { width: 195px; margin-left: 10px; }
.comments .content .ptitle { color: #DE3339; }
/*Past Event*/
#scrollDiv { width: 924px; height: 133px; position: relative; overflow: hidden; margin-left: 28px; _margin-left: 0px; padding-top: 11px; }
.ok img { margin: 5px; width: 122px; height: 94px; }
.btnL, .btnR { background: url("images/lr.png") no-repeat scroll 0 0 transparent; cursor: pointer; display: inline-block; height: 32px; position: absolute; text-indent: -9999px; top: 45px; width: 20px; }
.btnL { left: 0px; }
.btnR { right: 0px; background-position: -20px 0; }
.title { text-align: left; font-size: 26px; }
.titlebgm { border: 1px solid #000; }
.titlebgbL { width: 6px; height: 11px; background: url(${rc.getContextPath()}/front/images/titlebgbL.jpg); float: left; }
.titlebgbR { width: 6px; height: 11px; background: url(${rc.getContextPath()}/front/images/titlebgbR.jpg); float: right; }
.titlebgbM { height: 11px; background: url(${rc.getContextPath()}/front/images/titlebgbM.jpg) repeat-x; float: left; }
/*分页样式*/
.page em { margin-right: 10px; }
.page span, .page a { display: inline-block;  *display:inline; *zoom:1;width: 18px; _width: 19px; height: 18px; line-height: 18px; text-align: center; border: 1px solid #dcdcdc; background-color: #fff; vertical-align: top; color: #808080; }
.page span, .page a:hover { border: 1px solid #dcdcdc; background-color: #000; color: #fff; }
.page a.next, .page a.next:hover { width: 48px; _width: 58px; background: url(${rc.getContextPath()}/front/images/pages_next.gif) 0 0 no-repeat; color: #000; text-align: left; padding-left: 10px; }
.page a.prev, .page a.prev:hover { width: 48px; _width: 58px; background: url(${rc.getContextPath()}/front/images/pages_prev.gif) 0 0 no-repeat; color: #000; text-align: left; padding-left: 10px; }

 
</style>
    <script type="text/javascript" src="${rc.getContextPath()}/front/js/WdatePicker.js"></script>
    <script type="text/javascript" src="${rc.getContextPath()}/front/js/miaov.js"></script>
    <script type="text/javascript">
        $(function () {
            WdatePicker({ eCont: 'div1', specialDates: ['....-..-01', '....-..-15'], skin: "ext", lang: 'en' })
        });
	</script>
    </head>
    <body>
 <#include "${base!}/front/header.html"/>
    <div class="main">
	<div  class="slide" id="slide">
      <div class="slide-lists fleft">
    	<ul>
    	<#if top??>
    		<#list top as event>
          <li class="list" <#if event_index==0>  style="display: block" </#if> ><a href="activeshow.html?id=${event.id}"  ><img src="${event.conentImg!(rc.getContextPath()+'/front/images/tempyl.jpg')}" alt="" width="734" height="396"/> </a> </li>
         
             </#list>
        </#if>
        </ul>
  	  </div>
      <div class="small-pics fright">
    	<ul>
    	<#if top??>
    		<#list top as event>
    		
          <li class="smallpic <#if event_index==0> cur </#if> " data-index="${event_index}"><a href="activeshow.html?id=${event.id}"><img src="${event.conentImg!(rc.getContextPath()+'/front/images/tempyl.jpg')}" width="227" height="122"/></a><span class="mask"></span> </li>
          
        	</#list>
        </#if>
        </ul>
  	  </div>
 
      <div class="contents">
        <#if top??>
    		<#list top as event>
      	<span class="content"  <#if event_index==0>style="display: block"</#if>><a href="activeshow.html?id=${event.id}">${event.title}</a></span> 
      	    </#list>
        </#if>
 
      </div>
    </div>
	<script type="text/javascript">
        var slideJS = (function(){
            var swrap = $("#slide"),
                    biglists = swrap.find(".list"),
                    smalllists = swrap.find(".smallpic"),
					contents = swrap.find(".content"),
                    //btnlists=swrap.find(".slidebtn"),
                    flag = true,
                    interval = 3000,
                    TimeList,
                    N=0;
    
            function changeSlide(i){
                biglists.eq(i).fadeIn().siblings().hide();
                smalllists.eq(i).addClass("cur").siblings().removeClass("cur");
				contents.eq(i).fadeIn().siblings().hide();
                //btnlists.eq(i).addClass("cur").siblings().removeClass("cur");
                N = i;
            }
    
    
            function timeOut(){
                TimeList = setTimeout(function() {
                    if (flag) {
                        N++;
                        if (N == 3) {
                            N = 0;
                        }
                        smalllists.eq(N).trigger("mouseenter");
                    }
                    TimeList = setTimeout(arguments.callee, interval);
                }, interval);
            }
    
    
            return {
                init : function(){
                    smalllists.on("mouseenter", function() {
                        var now = $(this),i = now.data("index");
                        changeSlide(i);
                    });
    
                    //btnlists.on("click ",function(){
//                        var now = $(this),i = now.data("index");
//                        changeSlide(i);
//                    }).eq(N).trigger("click");
    
                    swrap.live("mouseover",function(){
                        clearTimeout(TimeList);
                        TimeList = null;
                    })
    
                    swrap.live("mouseout",function(){
                        timeOut();
                    });
    
                    timeOut();
                }
            }
        })();
        slideJS.init();
        
        
        function showdiv(){
        	alert(1);
        }
        
        
    </script>    
    	<div class="wrap">
          <div class="fleft active">
              <div class="title">
                  <span class="fleft">Advisors</span>
                  <!--<em>All Concert Sports Event Exhibition Film</em>-->
                  <div class="fright dropdownArea">
                  	<!-- <input type="text" value="Lastest updates" readonly="readonly" disabled="disabled" /><span class="dropdownIco" onclick="showdiv()" style="cursor: pointer;"></span>-->
 
						<div id="drop" class="down_list" >
						    <h2 class="up">
						    <#if order??>
						    
						    <#if order==2>
						    Lastest updates
						    </#if>
						    
						    <#if order==3>
						      Recommend
						    </#if>
						  
						    <#else>
						    Lastest updates
						    </#if>
						    
						    </h2>
						    <ul style="display:none;">
						        <li><a href="active.html?order=2">Lastest updates</a></li>
						        <li><a href="active.html?order=3">Recommend</a></li>
	 
 			 
						    </ul>
						</div>
 
                
                
                  </div>
              </div>
              <div class="activelist">
              	<ul>
              	<#if page??&&page.list??>
              		<#list page.list as event >
                	<li>
                    	<div class="fleft imgli" onclick="window.location.href='activeshow.html?id=${event.id}'"  style="cursor:pointer;">
                		<a  ><img src="${event.titleImg!(rc.getContextPath()+'/front/images/tempyl.jpg')}" width="169px" height="135px"/></a>
                        </div>
                        <div class="fleft spanli" onclick="window.location.href='activeshow.html?id=${event.id}'"  style="cursor:pointer;">
                        <span class="title1">
                        
                        <a href="activeshow.html?id=${event.id}">${event.title}</a></span>
                        <!--  <span>Date:${event.eventTime!''}</span>
                        <span>Venue:${event.eventVenue!''}</span>-->
                        <span>   
                        
                        	<#if event.eventDesc?length lt 210>
								${event.eventDesc}
							<#else>
								${event.eventDesc?substring(0,210)}...
							</#if>
						                        
                        
                        </span>
                        </div>
 
                    </li>
                    </#list>
                   </#if>
                     
                </ul>
                <div class="fright" style="margin-top: 9px;margin-right: 9px;">
                <#include "${rc.getContextPath()}/common/frontPage.html"/>
                </div>
              </div>
          </div>
          <div class="fright calendardiv">
          	<div class="calendar"><div id="div1">2014-02-11</div></div>
          	
          	    <@cms_banner_list >
          	    
			      <#list advisors_banner_list as banner> 
			         <div class="card1" style="height:160px; overflow:hidden;"><a href="${banner.link!'#'}"><img  width="305px" height="167px" src="${banner.url!(rc.getContextPath()+'/front/images/card.gif')}"/></a></div>
					 
				  </#list>
 
 
            </@cms_banner_list>
            
 
          </div>
          <div style="float:left;width:100%;margin-bottom:40px;font-size:12px;display:none">
        <div class="title" style="margin-left:20px;line-height:58px;">Past Event</div>
        <div class="titlebgm" style="height: 155px; position:relative;">
          <div id="scrollDiv">
            <ul id="tag__1" style="position: relative; white-space: nowrap; overflow: hidden; list-style-type: none; margin: 0px; padding: 0px; width: 6600px;">
              <#list list as event>
              <li style="white-space: nowrap; display: inline; overflow: hidden; float:left;">
                <table cellspacing="0" cellpadding="0" border="0" class="ok">
                  <tbody>
                    <tr>
                      <td><a target="_blank" href="activeshow1.html?id=${event.id}"><img border="0"   src="${event.titleImg!(rc.getContextPath()+'/front/images/tempyl.jpg')}"/></a></td>
                    </tr>
                    <tr><td><a target="_blank" href="activeshow1.html?id=${event.id}" style="margin:4px;color:#000;font-size:12px;">
 
                            <#if event.title?length lt 8>
								${event.title}
							<#else>
								${event.title?substring(0,8)}...
							</#if>
						              
                    
                    </a></td></tr>
                  </tbody>
                </table>
              </li>
              </#list>
              
               
            </ul>
          </div>
          <a class="btnL" id="LeftArr" style=" z-index:2000;">左</a> <a class="btnR" id="RightArr" style=" z-index:2000;">右</a> </div>
       
        <script type="text/javascript">       
			  function _initRun(str) {
				  $obj = $("#" + str);
				  var $li = $("#" + str + " li");
				  var l_li = $li.length;
				  if (l_li <= 4 && l_li > 2) {
					  for (var i = 0; i < l_li; i++)
					  { $obj.append($li[i].cloneNode(true)) }
					  $obj.css('width', (l_li * 2 + 1) * 119 + 'px');
				  }
				  else $obj.css('width', (l_li + 1) * 119 + 'px');
			  }
			  _initRun('tag__1'); _initRun('tag__2'); $obj = $("#tag__1");
			  function tween(t, b, c, d) { return c * ((t = t / d - 1) * t * t * t * t + 1) + b; }
			  var running = false;
			  var isright = false; var isetTimeout, setTimeoutRun, goNum = 0, lastGoNum = 0;
			  function __run() {
				  if (goNum == 0) {
					  lastGoNum = 0;
					  goNum = 1;
				  }
				  ml = parseInt($obj.css("margin-left"));
				  t = 0,
				  _l = goNum - lastGoNum,
				  c = isright ? -ml + 119 * _l : 119 * goNum + ml,
				  d = 60;
				  $obj.css('width', (parseInt($obj.css('width')) + _l * 119) + 'px');
		
				  isright = (arguments.length == 1);
		
		
				  if (isright) {
					  for (var i = 1; i <= _l; i++) {
						  $obj.prepend($obj.find("li").eq(-i - lastGoNum).clone());
					  }
					  $obj.css("margin-left", -c + 'px');
				  }
				  else {
					  for (var i = _l; i > 0; i--) {
						  $obj.append($obj.find("li")[goNum - i].cloneNode(true));
					  }
				  }
				  function _run() {
					  if (t < d) {
						  t++;
						  if (isright) { $obj.css("margin-left", (-c + Math.ceil(tween(t, 0, c, d))) + 'px'); }
						  else $obj.css("margin-left", (-Math.ceil(tween(t, 0, c, d)) + ml) + 'px');
						  setTimeoutRun = setTimeout(_run, 15);
					  } else {
						  var $li = $obj.find("li");
						  if (isright) {
							  for (var i = 1; i <= goNum; i++) {
								  $li.eq(-i).remove();
							  }
						  }
						  else {
							  for (var i = 0; i < goNum; i++) {
								  $li.eq(i).remove();
							  }
						  }
						  $obj.css("margin-left", '0');
						  goNum = 0;
						  isetTimeout = setTimeout(__run, 2000);
					  }
				  }
				  _run();
			  }
			  __run();
			  $("#LeftArr").click(function (e) {
				  clearTimeout(isetTimeout); clearTimeout(setTimeoutRun);
				  lastGoNum = goNum;
				  goNum += 3;
				  __run(true);
			  });
			  $("#RightArr").click(function (e) {
				  clearTimeout(isetTimeout); clearTimeout(setTimeoutRun);
				  lastGoNum = goNum;
				  goNum += 3;
				  __run();
			  });
			  $("#tag__1 li").mouseover(function(e){
				  clearTimeout(isetTimeout); clearTimeout(setTimeoutRun);
			  });
			  $("#tag__1 li").mouseout(function(e){
				  __run();
			  });
		</script>
        
      </div>
        </div>
    </div>
    <#include "${base!}/front/footer.html"/>
</body>
</html>